import React, { useEffect } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";
type Props = {};

export default function MyMap({}: Props) {
  useEffect(() => {
    AMapLoader.load({
      key: "57c8f4c2d0ec7719d59e864b88ddfe1f", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Driving"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        let map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          resizeEnable: true,
          center: [116.397428, 39.90923], //地图中心点
          zoom: 13, //地图显示的缩放级别
        });
        //构造路线导航类
        var driving = new AMap.Driving({
          map: map,
          panel: "panel",
        });
        // 根据起终点名称规划驾车导航路线
        driving.search(
          [
            { keyword: "北京市地震局(公交站)", city: "北京" },
            { keyword: "亦庄文化园(地铁站)", city: "北京" },
          ],
          function (status: any, result: any) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            console.log(status, result);

            if (status === "complete") {
              console.log("绘制驾车路线完成");
            } else {
              console.log("获取驾车数据失败：" + result);
            }
          }
        );
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);
  return (
    <div id="container" style={{ height: "500px", border: "1px solid red" }}>
      地图加载中...
    </div>
  );
}
